<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <style>
    * {
        padding: 0;
        margin: 0;
      
    }

    ul,
    li {
        list-style: none;
    }
    .box {
        width: 500px;
        height: 666px;
        border: 5px solid red;
        margin: auto;
        margin-top: 100px;
        position: relative;
        overflow: hidden;
        background: orange;
        overflow: hidden;
        border-radius: 10px;
    }

    .box ul {
        width: 3500px;
        height: 100%;
        position: absolute;
        left: 0px;
       
        
    }
    .box ul li {
        float: left;
        width: 500px;
        height: 500px;
        font-size: 50px;
        border-radius: 50%;
        text-align: center;
        line-height: 500px;
        user-select: none;
        position: relative;
        
    }

    .box .btnList {
        position: absolute;
        bottom: 10px;
        right: 20%;
    }

    .box .btnList li {
        float: left;
        width: 40px;
        height: 40px;
        background: #000;
        color: #fff;
        border-radius: 50%;
        margin-right: 10px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        user-select: none;
    }

    .box .btnList .active {
        background: green;
    }
    .box .btn {
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
    }
    .box .btn .leftBtn {
        float: left;
        width: 50px;
        height: 50px;
        background: rgba(99, 99, 99, 0.5);
        font-size: 30px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        user-select: none;
        border-radius:50%;
        color: #fff;
        margin-top: -110px;
    }
    .box .btn .rightBtn {
        float: right;
        width: 50px;
        height: 50px;
        background: rgba(99, 99, 99, 0.5);
        font-size: 30px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        user-select: none;
        border-radius:50%;
        color: #fff;
        margin-top: -110px;
    }
    /* 添加旋转动画 */
    @keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
ul li{
transform: rotate(360deg);
animation: rotation 2s linear infinite;
-moz-animation: rotation 2s linear infinite;
-webkit-animation: rotation 2s linear infinite;
-o-animation: rotation 2s linear infinite;
}
/* 给中间设置一个中空的环 */
 ul li span{
    position: absolute;
    width: 80px;
    height: 80px;
    background: #fff;
    border: 15px solid  orange;
    border-radius: 50%;
    left: 40%;
    top:40%;
    opacity:0.8;
}
/* 音频添加 */
audio{
    position: absolute;
    bottom: 80px;
    left: 100px;
    color: #58bc58;
}
</style>
<body>
<div class="box">
    <ul class="list">
        <li style="background:url(img/rong.jpg); background-size: 8%; "><span></span></li>
        <li style="background:url(img/guo.jpg); background-size: 20%; "><span></span></li>
        <li style="background:url(img/loo.jpg); background-size: 30%; "><span></span></li>
        <li style="background:url(img/rong.jpg); background-size: 40%; "><span></span></li>
        <li style="background:url(img/guo.jpg); background-size: 50%; "><span></span></li>
        <li style="background:url(img/loo.jpg); background-size: 100%; "><span></span></li>
    </ul>
    <div class="btn">
        <span class="leftBtn">&#9785;</span>
        <span class="rightBtn">&#10084;</span>
    </div>
    <ol class="btnList">
        <!-- 根据轮播图的张数得到的按钮列表 -->
        <!-- <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li> -->
    </ol>
 <!-- audio是音频标签，baisource是音频链接，
    autoplay是自动播放du，
    controls是控制条，
    loop是循环播放 -->
    <audio controls=' controls'autoplay='autoplay' loop='  loop'  >
        <source src="song.ogg" type="audio/ogg" />
        <source src="雅俗共赏.mp3" type="audio/mpeg">
      </audio>
    <script src="js/utils.js"></script>
    <script>
        // 1.根据轮播图渲染按钮列表
        // 2.让轮播图走动，按钮高亮跟着变化
        // 3.点击按扭的时候，图片跟着切换
        // 4.鼠标移入box 停止轮播图的移动
        // 5.鼠标移出box 重新开始轮播图移动
        // 6.点击左右却换按钮,也可以移动版轮播图
        // 获取需要用到的元素
        let box=document.querySelector('.box');
        let list=document.querySelector('.list');
        let lists=document.querySelectorAll('li');
        // 获取按钮列表的父元素
        let btnList=document.querySelector('.btnList');
        // 获取左右点击按钮
        let leftBtn=document.querySelector('.leftBtn');
        let rightBtn=document.querySelector('.rightBtn');
        // 循环轮播图的节点去添加按钮
        renderBtn(btnList,lists)
        // 获取小圆点元素
        console.log(btnList)
        let con=btnList.querySelectorAll('li');
        // 给轮播图的最后追加一个和第一个元素一样的元素
        let cloneFirst=list.firstElementChild.cloneNode(true);
        list.appendChild(cloneFirst)
        // 获取按钮元素的父元素
        lists=list.querySelectorAll('li');
        // 让轮播图运动起来
        let index=0;
        let timer;
        let flag=true;
        autoPlay()
        // 鼠标移入box停止定时器
        box.onmouseover=()=>{
            clearInterval(timer)
        }
        // 4。鼠标移除box重启定时器
        box.onmouseout=()=>{
            autoPlay()
        }
        // 5.点击左右按钮的时候改变轮播图
      leftBtn.onclick=()=>{
        leftBtn.style.color='#58bc58';
            // 当index=0的时候显示的是第一个元素，若还要往左边切换，需要的到是，左边的后一个元素，
            // 吧复制好的最后一个班元素添加到最后一个元素的前面
            if(flag){
                flag=false;
                index--;
                showActive();
                move(list,{left:index*(-500)},()=>{
                    flag=true;
                    if(index===0){
                      index=6;
                      list.style.left=index*(-500);
                    }
                    leftBtn.style.color='#fff';
                })
            }
        }
        rightBtn.onclick=()=>{
            rightBtn.style.color='red';
            if(flag===true){
                flag=false;
                index++; 
                showActive();
                move(list,{left:index*(-500)},()=>{
                    // 动画执行完之后把状态改回true,表示可以点击切换
                flag=true;
                if(index===lists.length-1){
                    index=0;
                    list.style.left='0px';
                   
                }
                rightBtn.style.color='#fff';
                })
            }
        }
        function renderBtn(ele,arr){
            // ele:把循环生成的li添加到那个元素中
            // arr:根据什么数据循环
            arr.forEach((item,index)=>{
                if(index===0){
                    ele.innerHTML+=`<li calss="active">${index+1}</li>`;
                    // 表示不执行return后面的代码
                    return
                }
                ele.innerHTML+=`<li>${index+1}</li>`;
            })
        }
        function autoPlay(){
            timer=setInterval(()=>{
                index++;
                // 先说小圆点的高亮；
                showActive();
                move(list,{left:index*(-500)},()=>{
                    if(index===lists.length-1){
                        index=0;
                        // list的left设置0px;
                        list.style.left='0px';
                    }
                });
            },2000);
            // 1000毫秒的时候执行下次的定时器；
        }
     function showActive(){
        //  运用排他思想，先把所有的按钮高亮都清除，之后再给当前的按钮按钮添加
        for(let i=0;i<con.length;i++){
            con[i].className='';
        }
        // 因为开始的时候轮播图的元素多添加了一个，显示轮播图中最后一张图片的时候，实际上就是第一个元素
        // 应该让第一个小圆点高亮；
        if(index===lists.length-1){
            con[0].className='active';
        }else{
            con[index].className='active';
        }
     }
  
     btnList.onclick=(e)=>{
         var e=e||window.event;
        for(let i=0;i<con.length;i++){
            con[i].className='';
            if(e.target.innerText-1===i){
            con[i].className='active';
        }
        }
        let n=e.target.innerText;
        move(list,{left:(n-1)*(-500)},()=>{
                    if(n===lists.length-1){
                        n=0;
                        // list的left设置0px;
                        list.style.left='0px';
                    }
                });
// 2.通过li的索引值去改变图片的left值
     }
     
    </script>
</body>
</html>